Coding Schools

How to add CSS in HTML
Types of CSS Files
Flex in CSS
Media Query in CSS
CSS - background attribute
CSS - border
css - border-image
CSS align attributes
CSS color attribute
CSS cursor attribute
CSS display attribute
CSS font attributes
CSS height and max-height
CSS width and max-width
CSS padding attributes
CSS margin attributes
CSS mask attributes
CSS overflow attributes
CSS opacity attribute
CSS text decoration attributes
CSS visibility attribute
CSS word attributes
CSS z-index attribute

Flex in CSS

CSS Flexbox, or the Flexible Box Layout, is a layout model that allows you to design a flexible and responsive layout structure without using float or positioning.

Here are some key concepts and properties to understand:

Container Properties

display: flex; - This property defines a flex container.
flex-direction - This defines the direction of the flex items inside the container. It can be row, row-reverse, column, or column-reverse.
justify-content - This aligns the flex items along the main axis. Values can be flex-start, flex-end, center, space-between, space-around, or space-evenly.
align-items - This aligns the flex items along the cross axis. Values include stretch, flex-start, flex-end, center, or baseline.
flex-wrap - This specifies whether the flex items should wrap or not. It can be nowrap, wrap, or wrap-reverse.

Item Properties

flex - This is a shorthand property for flex-grow, flex-shrink, and flex-basis. It defines how a flex item will grow or shrink to fit the space available in its flex container.
order - This defines the order of the flex items.
align-self - This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. Values can be auto, flex-start, flex-end, center, baseline, or stretch.

Example

Here' a simple example to illustrate how Flexbox works:

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
  .container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
  }
  .item {
    padding: 10px;
    margin: 10px;
    background-color: #4CAF50;
    color: white;
    font-size: 20px;
    text-align: center;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

In this example:

The .container is a flex container with a row direction, centering items along both axes.
Each .item inside the container is a flex item.

Feel free to ask any questions if you need further clarification!